<template>
  <div class="page-wapper">
    <!-- 组织架构 -->
    <div class="container" style="padding: 0">
      <!-- 顶部 -->
      <header class="group_header">
        <div class="t_c">组织架构</div>
      </header>
      <!-- 主体 -->
      <div class="group_part">
        <div class="group_content">
          <!--  -->
          <div class="group_row">
            <div class="group_cell_wrapper">
              <div class="group_cell bottom_line">技术部</div>
              <div class="link_line"></div>
            </div>
          </div>

          <div class="group_row">
            <div class="group_cell_wrapper">
              <div class="group_cell top_line bottom_line">前端组</div>
              <div class="group_cell top_line bottom_line">立团组</div>
              <div class="group_cell top_line bottom_line">家乐组</div>
              <div class="link_line top"></div>
            </div>
          </div>

          <div class="group_row">
            <div class="group_cell_wrapper">
              <div class="group_cell top_line">前端小组A</div>
              <div class="group_cell top_line">前端小组B</div>
              <div class="group_cell top_line">前端小组C</div>
              <div class="link_line top"></div>
            </div>

            <div class="group_cell_wrapper">
              <div class="group_cell top_line">立团小组A</div>
              <div class="group_cell top_line">立团小组B</div>
              <div class="group_cell top_line">立团小组C</div>
              <div class="link_line top"></div>
            </div>

            <div class="group_cell_wrapper">
              <div class="group_cell top_line">家乐小组A</div>
              <div class="group_cell top_line">家乐小组B</div>
              <div class="group_cell top_line">家乐小组C</div>
              <div class="link_line top"></div>
            </div>
          </div>
          <!--  -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  onMounted,
  nextTick,
  getCurrentInstance,
  onActivated,
  toRefs,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

export default {
  name: "GroupManage",
  setup() {
    const { proxy } = getCurrentInstance();
    const $api = proxy.$api;

    const groupData = ref([
      {
        name: "技术部",
        children: [
          {
            name: "前端组",
            children: [
              { name: "前端小组A" },
              { name: "前端小组B" },
              { name: "前端小组C" },
            ],
          },
          {
            name: "立团组",
            children: [
              { name: "立团小组A" },
              { name: "立团小组B" },
              { name: "立团小组C" },
            ],
          },
          {
            name: "家乐组",
            children: [
              { name: "家乐小组A" },
              { name: "家乐小组B" },
              { name: "家乐小组C" },
            ],
          },
        ],
      },
    ]);

    // 删除单个内容
    const deleteTableDataMethod = (row) => {};

    // 删除内容接口
    const deleteTableData = (ids) => {
      tableState.tableLoading = true;
      $api.report
        .deleteReport({
          ids,
        })
        .then((res) => {
          console.log("res => ", res);
          ElMessage.success("删除成功！");
          getTableData();
        })
        .catch((err) => {
          console.error("deleteReport error: ", err);
        })
        .finally(() => {
          tableState.tableLoading = false;
        });
    };

    // onActivated(() => {
    // });

    return {
      groupData,
      deleteTableDataMethod,
    };
  },
};
</script>

<style lang="less" scoped>
.group_header {
  border-bottom: 1px solid #eee;
  padding: 20px;
}

.group_part {
  flex: 1;
  overflow: auto;
  .group_content {
    position: relative;
    padding: 20px;
  }
  .group_row {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .group_cell_wrapper {
    position: relative;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }
  .link_line {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 0;
    height: 100%;
    width: 500px;
    transform: translateX(-50%);
    box-sizing: border-box;
    &.top {
      border-top: 2px solid #409eff;
    }
    &.bottom {
      border-bottom: 2px solid #409eff;
    }
  }
  .group_cell {
    border: 1px solid #409eff;
    position: relative;
    padding: 10px 20px;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    & + .group_cell {
      margin-left: 40px;
    }
    &.top_line::before {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 2px;
      background: #409eff;
      height: 20px;
      transform: translate(-50%, -100%);
    }
    &.bottom_line::after {
      display: block;
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 2px;
      background: #409eff;
      height: 20px;
      transform: translate(-50%, 100%);
    }
  }
}
</style>
